<template>
	<scroll-view scroll-y="true" @refresherrefresh='refresherrefresh'>
		<view class="container">
			<navBar :title="t('address.edit')"></navBar>
			<view class="form-item">
				<view class="label">{{ t('address.Consignee') }}</view>
				<view class="input-content">
					<input type="text" v-model="form.name" placeholder="Enter name" />
				</view>
				<view class="gender-select">
					<view class="gender-btn" :class="{ active: form.gender === 'Mr.' }" @tap="form.gender = 'Mr.'">Mr.
					</view>
					<view class="gender-btn" :class="{ active: form.gender === 'Ms.' }" @tap="form.gender = 'Ms.'">Ms.
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="label">{{ t('address.Number') }}</view>
				<view class="input-content">
					<input type="number" v-model="form.phone" placeholder="Enter phone number" />
				</view>
			</view>

			<view class="form-item" @click="selectCity">
				<view class="label" @click="selectCity">{{t('address.City')}}</view>
				<view class="input-content with-arrow" @click="selectCity">
					<view>{{ form.city }}</view>
					<!-- <input type="text" v-model="form.city" placeholder="Select city" disabled /> -->
					<tn-icon name="right" size="24"></tn-icon>
				</view>
			</view>

			<view class="form-item">
				<view class="label">{{t('address.Address')}}</view>
				<view class="input-content with-arrow">
					<input type="text" v-model="form.address" placeholder="Enter address" />
					<tn-icon name="right" size="24"></tn-icon>
				</view>
			</view>

			<view class="form-item">
				<view class="label">{{t("address.HouseNumber")}}</view>
				<view class="input-content">
					<input type="text" v-model="form.houseNumber" placeholder="Enter house number" />
				</view>
			</view>

			<view class="form-item">
				<view class="label">{{t("address.label")}}</view>
				<view class="label-group">
					<view v-for="label in labels" :key="label" class="label-btn"
						:class="{ active: form.selectedLabels.includes(label) }" @tap="toggleLabel(label)">{{ label }}
					</view>
				</view>
			</view>

			<view class="button-group">
				<button class="save-btn" @tap="handleSave">{{t('common.Save')}}</button>
				<button class="delete-btn" @tap="handleDelete">{{t('common.Delete')}}</button>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import navBar from "../../components/navBar/index.vue"
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	const labels = ['Home', 'Company', 'School'];

	const form = ref({
		name: 'ZHANG',
		gender: 'Mr.',
		phone: '19988887777',
		city: 'NANJING',
		address: 'Jiangning District Nantong Xinhua Construction Group',
		houseNumber: '12345',
		selectedLabels: ['Home']
	});
	const selectCity = () => {
		console.log('selectCity');
		uni.navigateTo({
			url: '/pages/location/location'
		})
	}
	const toggleLabel = (label) => {
		const index = form.value.selectedLabels.indexOf(label);
		if (index === -1) {
			form.value.selectedLabels = [label];
		}
	};

	const handleSave = () => {
		uni.showToast({
			title: 'Address saved',
			icon: 'success'
		});
	};
	const refresherrefresh = () => {
		console.log('滚动');
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
		uni.showModal({
			title: "滚动"
		})
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	}
	const handleDelete = () => {
		uni.showModal({
			title: 'Confirm Delete',
			content: 'Are you sure you want to delete this address?',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: 'Address deleted',
						icon: 'success'
					});
				}
			}
		});
	};
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.form-item {
		margin-bottom: 40rpx;

		.label {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 20rpx;
		}

		.input-content {
			border-bottom: 2rpx solid #eee;
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			input {
				flex: 1;
				font-size: 32rpx;
				color: #333;
			}

			&.with-arrow {
				justify-content: space-between;
			}
		}
	}

	.gender-select {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;

		.gender-btn {
			padding: 10rpx 60rpx;
			border-radius: 100rpx;
			font-size: 28rpx;
			background-color: #f5f5f5;
			color: #666;

			&.active {
				background-color: #ff4d6a;
				color: #fff;
			}
		}
	}

	.label-group {
		display: flex;
		gap: 20rpx;

		.label-btn {
			padding: 10rpx 40rpx;
			border-radius: 100rpx;
			font-size: 28rpx;
			background-color: #f5f5f5;
			color: #666;

			&.active {
				background-color: #f5f5f5;
				color: #333;
				font-weight: 500;
			}
		}
	}

	.button-group {
		margin-top: 60rpx;
		padding: 0 30rpx;

		.save-btn {
			width: 100%;
			height: 88rpx;
			background-color: #ff4d6a;
			color: #fff;
			border-radius: 100rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
		}

		.delete-btn {
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			color: #333;
			border-radius: 100rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #eee;
		}
	}
</style>